# Working with Cache

**Category:** Guides

##  

Wix Patterns uses cache to optimize the request time, more specifically it uses the "in-memory" cache strategy which means that the cache persists only during the browser session. Once the browser tab is closed all cache is cleared.

For Business Manager environment, Wix Patterns provides an additional optimization — a single cache instance for all modules. While the user stays in Business Manager and navigate using the Business Manager API (without page reload), the same cache instance will be used for all Wix Patterns applications.

> This behavior in Business Manager is **disabled** by default, to enable it see below.

The data in the cache is stored in the key-value storage where key is generated using two components: `queryName` and `computedQuery` (request parameters). `queryName` is defined by the user when creating the collection (e.g. `useCollection` hook) and the `computedQuery` is auto generated based on the current query (sort, filters, search, etc). So if two applications in Business Manager use the same `queryName`, the global cache is enabled and the user navigates from one to another, the cache data will used.

> It's recommended to use the [fqdn](https://bo.wix.com/wix-docs/rnd/p13n-guidelines---aips/guidance-aips/wix-api-basics/[1009]-fqdn) of the service used in fetchData as queryName.

Most of the time this behavior is undesirable in Business Manager because some applications want to always have up-to-date data. That's why this optimization is disabled by default.

## Enable global cache

To enable the global cache in Business Manager, one should explicitly set it in the `` component.

```js
import { WixPatternsBMProvider } from '@wix/patterns/bm';

export const App = () => {
  return (
    
      {...}
    
  )
}
```

## Cache invalidation

In cases when the global cache is enabled it might be inconsistent with recent changes the user performed in other pages which use the same `queryName`. For such use cases Wix Patterns provides an API to invalidate all cache occurences of the provided `queryName`.

Consider having a BM page with a Wix Patterns table:

###### _.application.json_

```js
{
  "moduleId": "contacts-list"
}
```

###### _src/pages/contacts-list-page/index.tsx_

```jsx
import React from 'react';
import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
import { useCollection } from '@wix/patterns';
import { useHttpClient } from '@wix/yoshi-flow-bm';

export default () => {
  const httpClient = useHttpClient();
  const collection = useCollection({
    queryName: 'wix.contacts.v4.contact',
    fetchData: (query) => {
      const { limit, offset, search, filters } = query;
      return httpClient.request(queryContacts(/* ... */)).then((res) => {
        /* ... */
      });
    },
  });

  return <>{/* ... */};
};
```

And another BM page that changes data related to this collection:

###### _.application.json_

```js
{
  "moduleId": "create-new-contact"
}
```

###### _src/pages/create-new-contact-page/index.tsx_

Here, right after the action, we should notify Wix Patterns cache about the change:

> Install `@wix/patterns-integration-utils` package first.

```diff
import React from 'react';
import { createContact } from '@wix/ambassador-contacts-v4-contact/http';
import { useHttpClient } from '@wix/yoshi-flow-bm';
+ import { invalidateCacheForCollection } from '@wix/patterns-integration-utils/bm';

export default () => {
  const httpClient = useHttpClient();

  const onSubmit = async () => {
    await httpClient.request(
      createContact({
        /* ... */
      }),
    );
+   invalidateCacheForCollection({
      moduleId: 'contacts-list', // BM module ID of the page that renders the collection
      queryName: 'wix.contacts.v4.contact', // the queryName passed to Wix Patterns useCollection in the page that renders the collection
    });
  };

  return <>{/* ... */};
};
```